<template>
  <n-form
    ref="formInstance"
    :model="formData"
    :rules="formRules"
    label-placement="left"
    label-width="80px">
    <n-grid :cols="1" responsive="self" x-gap="12">
      <n-gi>
        <n-form-item label="上级编码" path="parentGroupCode">
          <n-input v-model:value="formData.parentGroupCode" readonly="" placeholder="请输入上级编码" />
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="分组名称" path="groupName">
          <n-input v-model:value="formData.groupName" placeholder="请输入分组名称" />
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="分组编码" path="groupCode">
          <n-input v-model:value="formData.groupCode" placeholder="请输入分组编码" />
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="允许编辑">
          <n-radio-group v-model:value="formData.allowEdit">
            <n-space>
              <n-radio v-for="it in allowOptions" :key="it.value" :label="it.label"
                       :value="it.value" />
            </n-space>
          </n-radio-group>
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="允许删除">
          <n-radio-group v-model:value="formData.allowDel">
            <n-space>
              <n-radio v-for="it in allowOptions" :key="it.value" :label="it.label"
                       :value="it.value" />
            </n-space>
          </n-radio-group>
        </n-form-item>
      </n-gi>
    </n-grid>
  </n-form>
</template>
<script lang="ts">
import { onMounted, ref } from "vue";
import { allowOptions, enabledOptions, formRules } from "./Service";
import httpApi from "./httpApi";
import { FormInst } from "naive-ui";

import { checkFormData } from "@/utils/formUtil";

export default {
  props: {
    id: {
      type: [String, Number],
      default: null
    },
    readMode: {
      type: [String],
      default: "read"
    },
    parentGroupCode:{
      type: [String, Number],
      default: null
    }
  },
  setup: function(props) {
    const formInstance = ref<FormInst | null>(null);
    const formData = ref<any>({
      id: props.id,
      enabled: 1,
      allowEdit: 1,
      allowDel: 1,
      parentGroupCode:props.parentGroupCode
    });
    const init = async () => {
      if (props.id) {
        let msg = await httpApi.selectById(props.id);
        formData.value = msg.data;
      }
    };
    const doSubmit = async () => {
      await checkFormData(formInstance);
      return httpApi.doSaveEntity(formData.value);
    };
    const doUpdate = async () => {
      await checkFormData(formInstance);
      return httpApi.doUpdateEntity(formData.value);
    };
    onMounted(() => {
      init();
    });
    return {
      allowOptions,
      enabledOptions,
      formData,
      formInstance,
      formRules,
      doSubmit,
      doUpdate
    };
  }
};
</script>

<style lang="less" scoped></style>
